<div class="background flex flex_column flex_1">
    <div class="title">自定义OCR</div>
    <!--上部三个模块-->
    <div class="three_module">
        <div class="Module">
            <div class="module_left">
                <img src="assets/images/simple.png" alt="" class="module_img">
            </div>
            <div class="module_right">
                <div class="module_title">通用单模板工作流</div>

                <div c>
                    <div class="module_button1">OCR</div>
                    <div class="module_button2">单模板</div>
                </div>
                <div class="module_data">
                    提供单模版开发的工作流，支持用户通过快速完成模版制作， 实现自定义结构化信息识别
                </div>
                <div class="newapplication">
                    新建应用
                </div>
            </div>
        </div>
        <div class="Module" style="margin-left: 2%">
            <div class="module_left">
                <img src="assets/images/multiple.png" alt="" class="module_img">
            </div>
            <div class="module_right">
                <div class="module_title">多模板分类工作流</div>

                <div c>
                    <div class="module_button1">OCR</div>
                    <div class="module_button2">单模板</div>
                </div>
                <div class="module_data">
                    提供单模版开发的工作流，支持用户通过快速完成模版制作， 实现自定义结构化信息识别
                </div>
                <div class="newapplication">
                    新建应用
                </div>
            </div>
        </div>
        <div class="Module" style="margin-left: 2%">
            <div class="module_left">
                <img src="assets/images/multimodality.png" alt="" class="module_img">
            </div>
            <div class="module_right">
                <div class="module_title">多模态抽取工作流</div>

                <div c>
                    <div class="module_button1">OCR</div>
                    <div class="module_button2">单模板</div>
                </div>
                <div class="module_data">
                    检测图片文字 </div>
                <div class="newapplication">
                    新建应用
                </div>
            </div>
        </div>
    </div>

    <!--下部表格-->
    <div class="bg_white mgt20 flex_1 main">
        <nz-table #basicTable [nzData]="listOfData" class="table">
            <thead>
                <tr class="thead_font">
                    <th nzWidth="16%">应用名称</th>
                    <th nzWidth="11%">状态</th>
                    <th nzWidth="10%">负责人</th>
                    <th nzWidth="15%">工作流</th>
                    <th nzWidth="18%">更新时间</th>
                    <th nzWidth="18%">创建时间</th>
                    <th nzWidth="12%">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of basicTable.data" class="tbody_font">
                    <td>{{ data.project_name }}</td>
                    <td>
                        <span *ngIf="data.state === '可用'" class="small_circle" style="background:#5DD4AF;"></span>
                        <span *ngIf="data.state === '异常'" class="small_circle" style="background:#F66F6A;"></span>
                        <span *ngIf="data.state === '待激活'" class="small_circle" style="background: #6D87DA;"></span> {{ data.state }}

                    </td>
                    <td>{{ data.director }}</td>
                    <td>{{ data.workflow }}</td>
                    <td>{{ data.renewtime }}</td>
                    <td>{{ data.createtime }}</td>
                    <td>
                        <a>查看</a>
                        <nz-divider nzType="vertical"></nz-divider>
                        <a>删除</a>
                        <nz-divider nzType="vertical"></nz-divider>
                    </td>
                </tr>
            </tbody>
        </nz-table>

    </div>

</div>